<!--系统管理 --- 组织机构 --- 岗位管理 -->
<template>
  <div class="department">
    <!-- 左侧部门管理 -->
    <div class="structureTree" v-if="treelength">
      <div class="structureTree_title">
        <div>组织机构</div>
      </div>
      <!-- <el-tree ref="tree" :data="treeData" :props="defaultProps" @node-click="handleNodeClick"
        :highlight-current="highlightBd" node-key="fCompanyid" :accordion="true" :expand-on-click-node="false"
        :default-expanded-keys="expandedKeys">
            </el-tree> -->
      <tree :treeData="treeData" :checkData="checkData" name="SysManageManage_treeCheck" nodeKey="fCompanyid"
        @getTreeInfo="handleNodeClick" :defaultProps="defaultProps">
      </tree>
    </div>
    <!-- 右侧 -->
    <div class="department_right">
      <!-- 机构名称 -->
      <div class="department_right_name">
        <div>{{ showName }}--岗位信息</div>
      </div>
      <!-- 顶部导航栏 -->
      <div class="mechanism_nav">
        <!-- 左侧 -->
        <div class="mechanism_nav_left"></div>
        <!-- 顶部按钮 -->
        <div class="print">
          <div class="printTable">
            <el-button type="primary" icon="el-icon-refresh" size="small" @click="getDataList(companyId)"></el-button>
            <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="newDetail(treeCompanyid)"
              v-if="lr_add">
              新增</el-button>
            <el-button v-if="lr_edit" type="primary" icon="el-icon-search" size="small" @click="editText(fPostid)">编辑
            </el-button>
            <el-button v-if="lr_delete" type="primary" icon="el-icon-delete" size="small" @click="rowDelete(fPostid)">删除
            </el-button>
            <el-button v-if="lr_memberlook" type="primary" icon="el-icon-document-copy" size="small"
              @click="memberDetail()">查看成员
            </el-button>
          </div>
        </div>
      </div>

      <!-- 表格 -->
      <div class="text_table">
        <el-table ref="multipleTable" v-loading="loading" element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)"
          @row-click="getRowInfo" :data="tableData" style="width: 100%" height="calc(100% - 20px)" stripe border
          highlight-current-row @current-change="rowChange">
          <el-table-column fixed type="index" width="50" align="center">
          </el-table-column>
          <el-table-column prop="fPostname" label="岗位名称" width="200">
            <!-- 超出鼠标滑过显示 -->
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.fPostname">{{
                  scope.row.fPostname
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="fEncode" label="岗位编号" width="120" align="center">
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.fEncode">{{
                  scope.row.fEncode
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="fDepartmentName" label="所属部门" width="200">
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.fDepartmentName">{{
                  scope.row.fDepartmentName
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="fNote" label="备注" width="250">
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.fNote">{{
                  scope.row.fNote
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="fCreateusername" label="创建人" width="250">
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.fCreateusername">{{
                  scope.row.fCreateusername
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="fCreatedates" label="创建时间" width="250">
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.fCreatedates">{{
                  scope.row.fCreatedates
                }}</a>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!--弹框 新增 -->
      <div class="Control-1">
        <el-dialog :close-on-click-modal="false" title="添加岗位" v-dialogDrag :visible.sync="dialogCheckVisible"
          v-loading="loadingCheckDialog" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.2)">
          <div class="dialogBody common" :style="{ height: dialogHeight }">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
              <div class="tableRow">
                <el-form-item label="岗位编码" prop="fEncode" :label-width="formLabelWidth">
                  <el-input v-model="ruleForm.fEncode" autocomplete="off"></el-input>
                </el-form-item>
              </div>
              <div class="tableRow">
                <el-form-item label="岗位名称" prop="fPostname" :label-width="formLabelWidth">
                  <el-input v-model="ruleForm.fPostname" autocomplete="off"></el-input>
                </el-form-item>
              </div>

              <div class="tableRow">
                <el-form-item label="所属部门" prop="fDepartmentid" :label-width="formLabelWidth">
                  <el-select v-model="ruleForm.fDepartmentid" placeholder="请选择">
                    <el-option v-for="(a, item) in departmentList" :key="item" :value="a.fDepartmentid"
                      :label="a.fFullname"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="tableRow" style="margin-top: 10px">
                <el-form-item label="备注" prop="fNote" :label-width="formLabelWidth">
                  <el-input v-model="ruleForm.fNote" type="textarea" :rows="4" placeholder="请输入内容" autocomplete="off">
                  </el-input>
                </el-form-item>
              </div>
              <el-form-item class="newlyAdded_btn">
                <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                <el-button type="warning" @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-dialog>
      </div>
      <!--弹框 编辑 -->
      <div class="Control-1">
        <el-dialog :close-on-click-modal="false" title="编辑岗位" v-dialogDrag :visible.sync="dialogTableVisible"
          v-loading="loadingDialog" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.2)">
          <div class="dialogBody common" :style="{ height: dialogHeight }">
            <el-form :model="formData" :rules="rules" ref="formData">
              <div class="tableRow">
                <el-form-item label="岗位编码" prop="fEncode" :label-width="formLabelWidth">
                  <el-input v-model="formData.fEncode" autocomplete="off"></el-input>
                </el-form-item>
              </div>
              <div class="tableRow">
                <el-form-item label="岗位名称" prop="fPostname" :label-width="formLabelWidth">
                  <el-input v-model="formData.fPostname" autocomplete="off"></el-input>
                </el-form-item>
              </div>

              <div class="tableRow">
                <el-form-item label="所属部门" prop="fDepartmentid" :label-width="formLabelWidth">
                  <el-select v-model="formData.fDepartmentid" placeholder="请选择">
                    <el-option v-for="(a, item) in departmentList" :key="item" :value="a.fDepartmentid"
                      :label="a.fShortname"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="tableRow" style="margin-top: 10px">
                <el-form-item label="备注" prop="fNote" :label-width="formLabelWidth">
                  <el-input v-model="formData.fNote" type="textarea" :rows="4" placeholder="请输入内容" autocomplete="off">
                  </el-input>
                </el-form-item>
              </div>
              <el-form-item class="newlyAdded_btn">
                <el-button type="primary" @click="submitForm2('formData')">保存</el-button>
                <el-button type="warning" @click="resetForm2()">关闭</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-dialog>
      </div>
      <!-- 查看成员 -->
      <div class="Control-1 MemberCommon mechanism_dialog">
        <!--  -->
        <el-dialog :close-on-click-modal="false" :title="MemberTitle" v-dialogDrag :visible.sync="memberVisible"
          v-loading="loadingMemberDialog" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.2)">
          <div class="dialogBody member" :style="{ height: MemberDialogHeight }">
            <!-- 查看成员 -->
            <div class="MemberDialogBox">
              <noData v-if="MemberData.length == 0"></noData>
              <div class="userInfo" v-else v-for="(item, index) in MemberData" :key="index">
                <!--  -->
                <div class="MemberIcon">
                  <img src="@/assets/img/organization/boys.png" alt="" />
                </div>
                <div class="MemberDetailInfo">
                  <div class="name">{{ item.fRealname }}</div>
                  <div class="hostName">{{ item.fDepartmentName }}</div>
                  <div class="hostName">{{ item.fAccount }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import noData from "@/components/public/noData.vue";
import tree from "@/components/public/common-trees";

import {
  getBaseCompanyList,
  getBaseDepartmentList,
  getBasePostList,
  addBasePost,
  getBasePostByFid,
  delBasePost,
  // getRoleUserList,//查看成员
  getBaseUserList,
} from "@/api/request.js";

export default {
  inject: ["reload"],
  name: "Home",
  components: {
    tree,
    noData,
  },
  data() {
    return {
      name: "postManagement",
      lr_add: null,
      lr_edit: null,
      lr_delete: null,
      lr_memberlook: null,
      highlightBd: true,
      fDepartmentName: null,
      checked: false, //查看下级
      showName: "未选择公司",
      dialogHeight: "",
      loading: false,
      dialogFormVisible: false,
      formLabelWidth: "70px",
      tableData: [], //表格数据列表
      newShortname: "",
      MemberData: [], //查看成员
      MemberDialogHeight: null,
      loadingMemberDialog: false,
      memberVisible: false,

      MemberFlag: null, //点击成员按钮标志
      MemberTitle: null, //查看角色成员Dialog
      // 新增
      dialogCheckVisible: false, //弹窗的显示隐藏
      loadingCheckDialog: false,
      ruleForm: {
        fPostid: "", //岗位主键id
        fDepartmentid: "", //部门id
        fCompanyid: "", //机构id
        fPostname: "", //岗位名称
        fNature: "", //岗位性质
        fEncode: "", //岗位编码
        fNote: null, //备注
        fDepartmentName: "", //部门名称
      },
      rules: {
        fEncode: [
          { required: true, message: "请输入岗位编码", trigger: "blur" },
        ],
        fPostname: [
          { required: true, message: "请输入岗位名称", trigger: "blur" },
        ],
        fDepartmentid: [{ required: true, message: "请选择", trigger: "blur" }],
      },
      // 编辑
      fPostid: "",
      loadingDialog: false,
      dialogTableVisible: false,
      formData: {
        fPostid: "", //岗位主键id
        fDepartmentid: "", //部门id
        fCompanyid: "", //机构id
        fPostname: "", //岗位名称
        fNature: "", //岗位性质
        fEncode: "", //岗位编码
        fNote: null, //备注
        fDepartmentName: "", //部门名称
      },
      row: null,
      // 左侧机构树
      treelength: false,
      checkData: [],
      treeCompanyid: "",
      treeData: [], //左侧树
      companyTree: "", //所有数据
      defaultProps: {
        children: "children",
        label: "fShortname",
      },
      dialogVisible: false,
      companyId: null,
      // 部门
      departmentList: [],
      fDepartmentid: "",
      treedatas: null,
    };
  },
  mounted() {
    this.getHeight();
    if (JSON.parse(sessionStorage.getItem("SysManageManage_treeCheck"))) {
      var id = JSON.parse(sessionStorage.getItem("SysManageManage_treeCheck"));
      this.checkData = [id.fCompanyid];
      this.formData.fCompanyid = id.fCompanyid
      // this.ruleForm.fCompanyid = id.fCompanyid


    }
    this.getTree();
    this.btnRole(this.name);
    //
  },
  methods: {
    btnRole(name) {
      var btnList = [];
      var ModuleList = JSON.parse(sessionStorage.getItem("ModuleList"));
      if (ModuleList.length > 0) {
        ModuleList.map((item) => {
          if (item.fEncode == name) {
            btnList = item.modulebuttonList;
          }
        });
        var btnStr = [];
        btnList.map((item) => {
          btnStr.push(item.fEncode);
        });
        this.lr_add = btnStr.includes("lr_add");
        this.lr_edit = btnStr.includes("lr_edit");
        this.lr_delete = btnStr.includes("lr_delete");
        this.lr_memberlook = btnStr.includes("lr_memberlook");
      } else {
        this.lr_add = true;
        this.lr_edit = true;
        this.lr_delete = true;
        this.lr_memberlook = true;
      }
    },

    // 左侧树结构
    getTree() {
      getBaseCompanyList({})
        .then((res) => {
          if (res.errcode == 0) {
            var companyTree = res.data.baseCompanyList;
            this.treeData = this.commonJs.tranListToTreeData(companyTree);

            if (this.treeData[0].children == undefined) {
              this.treelength = false; //左侧组织机构是否显示
            } else {
              this.treelength = true;
            }

            var id;
            if (
              JSON.parse(sessionStorage.getItem("SysManageManage_treeCheck"))
            ) {
              let dataId = JSON.parse(
                sessionStorage.getItem("SysManageManage_treeCheck")
              );
              id = dataId.fCompanyid;
              this.showName = dataId.fShortname; //顶部显示机构名
            } else {
              id = this.treeData[0].fCompanyid;
              this.showName = this.treeData[0].fShortname; //顶部显示机构名
              this.checkData[0] = this.treeData[0].fCompanyid;
            }
            this.companyId = id;
            this.treeCompanyid = id;
            this.department(id);
            this.getDataList(id);
          } else {
            this.$message.error("获取组织机构失败", res.msg);
            return false;
          }
        })
        .catch(() => {
          return false;
        });
    },

    // 点击左侧机构树
    handleNodeClick(data) {
      this.showName = data.fShortname; //顶部显示机构名
      this.treeCompanyid = data.fCompanyid;
      this.treedatas = data;
      this.getDataList(this.treeCompanyid);
      this.department(this.treeCompanyid);
      // 卡卡3

      // 卡卡3
    },
    // 获取部门
    department(id) {
      getBaseDepartmentList({ fCompanyid: id }).then((res) => {
        if (res.errcode == 0) {
          this.departmentList = res.data.baseDepartmentList; //获取部门
        } else {
          this.$message.error("获取部门", res.msg);
        }
      });
    },

    // 获取列表数据
    getDataList(id) {
      this.fPostid = "";
      this.loading = true;
      getBasePostList({ fCompanyid: id })
        .then((res) => {
          if (res.errcode == 0) {
            var that = this;
            that.loading = false;
            that.tableData = res.data.basePostList;
            setTimeout(() => {
              that.$nextTick(() => {
                that.$refs.multipleTable.doLayout();
              });
            }, 200);
          } else {
            this.$message.error("列表数据", res.msg);
            this.loading = false;

            return false;
          }
        })
        .catch((error) => {
          console.log("列表数据接口", error);
          this.loading = false;
        });
    },
    // 新增
    newDetail(id) {
      this.ruleForm = {
        fPostid: "", //岗位主键id
        fDepartmentid: "", //部门id
        fCompanyid: this.checkData[0], //机构id
        fPostname: "", //岗位名称
        fNature: "", //岗位性质
        fEncode: "", //岗位编码
        fNote: null, //备注
        fDepartmentName: "", //部门名称
      };
      if (id != "" && id != null) {
        this.dialogCheckVisible = true;
        this.ruleForm.fCompanyid = this.treedatas.fCompanyid;
      } else {
        this.$message.error("请先选择机构组织");
        return false;
      }
    },
    // 新增确认
    submitForm() {
      var that = this;
      that.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loadingCheckDialog = true;
          addBasePost(that.ruleForm)
            .then((res) => {
              if (res.errcode == 0) {
                that.dialogCheckVisible = false;
                that.loadingCheckDialog = false;
                // 卡卡5
                this.getDataList(this.treeCompanyid);

                // 卡卡5
                that.$message.success("新增成功");
              } else {
                this.$message.error("新增失败", res.msg);
                this.loadingCheckDialog = false;
              }
            })
            .catch(() => {
              console.log("新增失败");
              this.loadingCheckDialog = false;
            });
        } else {
          that.$message.error("请填写必填项");
          return false;
        }
      });
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 编辑
    editText(id) {
      if (id != "") {
        this.dialogTableVisible = true;
        this.loadingDialog = false;
        getBasePostByFid({ fPostid: id })
          .then((res) => {
            if (res.errcode == 0) {
              var that = this;
              that.loadingDialog = false;
              that.formData = res.data.lrBasePost;
              for (let index = 0; index < that.departmentList.length; index++) {
                const element = that.departmentList[index];
                if (element.fDepartmentid == that.formData.fDepartmentid) {
                  that.formData.fDepartmentName = element.fFullname;
                }
              }
            } else {
              this.$message.error("编辑", res.msg);
              this.loadingDialog = false;
            }
          })
          .catch(() => {
            console.log("编辑接口");
            this.loadingDialog = false;
          });
      } else {
        return this.$message.error("请先选择需要编辑的部门");
      }
    },

    //  确认修改：
    submitForm2() {
      var that = this;
      that.$refs.formData.validate((valid) => {
        if (valid) {
          this.loadingDialog = true;
          addBasePost(that.formData)
            .then((res) => {
              if (res.errcode == 0) {
                that.dialogTableVisible = false;
                that.loadingDialog = false;
                that.getDataList(this.treeCompanyid);
                that.$message.success("修改成功");
              } else {
                this.$message.error("修改失败", res.msg);
                this.loadingDialog = false;
              }
            })
            .catch(() => {
              console.log("修改失败");
              this.loadingDialog = false;
            });
        } else {
          that.$message.error("请填写必填项");
          return false;
        }
      });
    },
    // 关闭
    resetForm2() {
      this.dialogTableVisible = false;
    },
    // 点击当前行
    getRowInfo(e) {
      this.row = e;
      this.fPostid = e.fPostid;
    },
    // 点击当前行变色
    rowChange(val) {
      this.currentRow = val;
    },

    // 获取页面容器高度
    getHeight() {
      var h = document.documentElement.clientHeight; //获取页面可见高度
      // var w = document.documentElement.clientWidth; //获取页面可见高度
      this.dialogHeight = h * 0.3 + "px";
      this.MemberDialogHeight = h * 0.66 + "px";
    },

    // 删除
    rowDelete(id) {
      if (id != "") {
        this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.loading = true;
            delBasePost({ fPostid: id })
              .then((res) => {
                if (res.errcode == 0) {
                  this.loading = false;
                  // 卡卡4
                  this.getDataList(this.treeCompanyid);

                  // 卡卡4
                  this.$message.success("删除成功");
                } else {
                  this.$message.error("删除失败", res.msg);
                  this.loading = false;
                  return false;
                }
              })
              .catch(() => {
                console.log("删除接口报错");
                this.loading = false;
              });
          })
          .catch(() => {
           this.$message("取消删除");
          });
      } else {
        return this.$message.error("请先选择需要删除的部门");
      }
    },
    // 查看成员
    memberDetail() {
      if (this.fPostid != null && this.fPostid != "") {
        this.loadingMemberDialog = true;
        this.checkboxGroup1 = [];
        this.departmentList = [];
        this.personList = [];

        this.memberVisible = true;
        this.MemberTitle = "查看成员";
        getBaseUserList({
          fCompanyid: this.treeCompanyid, //机构id    --选填，可不传
          fDepartmentid: "", //部门id   --选填，可不传
          fPostid: this.fPostid, //岗位id  --选填，可不传
          modelType: "0", //-- 0全部状态人员   1状态正常人员    必填
        })
          .then((res) => {
            if (res.errcode == 0) {
              this.loadingMemberDialog = false;
              this.MemberData = res.data.baseUserList;
              console.log(this.MemberData);
            } else {
              this.$message.error("查看成员", res.msg);
              this.loadingMemberDialog = false;
            }
          })
          .catch((error) => {
            console.log("查看成员接口报错", error);
            this.loadingMemberDialog = false;
          });
      } else {
        return this.$message.error("请先选择需要编辑的机构");
      }
    },
  },
};
</script>

<style scoped lang="less">
.printTables {
  background: #fff;
  display: flex;
  justify-content: end;
  padding: 5px;
  margin-top: 10px;
}

.dialogBody {
  padding: 3px 20px;
  height: 80%;
  overflow-y: auto;
}

.member {
  /* background: linear-gradient(90deg, #0934a3, #209ec3); */
  padding: 10px 25px 5px !important;
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-around;
  align-items: center; */
}

.userInfo {
  width: 160px;
  height: 64px;
  border: 1px solid rgba(222, 222, 222, 1);
  border-radius: 2px;
  display: flex;
  align-items: center;
  margin: 8px;
  box-sizing: border-box;

  .MemberIcon {
    height: 100%;
    width: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 8px;
    background: rgba(241, 241, 241, 1);

    img {
      width: 37.81px;
      height: 39.38px;
      border-radius: 50%;
    }
  }

  .MemberDetailInfo {
    position: relative;
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;

    .name {
      color: rgba(51, 51, 51, 1);
      font-size: 12px;
      height: 20px;
      line-height: 20px;
    }

    .hostName {
      color: rgba(128, 125, 125, 1);
      font-size: 12px;
      height: 20px;
      line-height: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: flex;
    }
  }
}

.MemberDialogBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;

  .selectMember {
    width: 180px;
  }

  .selectMemberBox {
    height: 40px;
    width: 100%;
    display: flex;
    padding-bottom: 5px;

    .selectMemberLeft {
      width: 30%;
      box-sizing: border-box;
    }

    .selectMemberRight {
      display: flex;
      align-items: center;
      width: 52%;
      // padding: 0 0 0 20px;
    }
  }
}

a {
  text-decoration: none;
  color: #000;
}
</style>